<template>
  <div class="scroll_box">
    <div class="navShow" :animation="animationData">
      <div class="classify">
        <div class="img"><img src="http://file.rzkeji.com/web/loveciy/img/footer11.jpg" class="colth"mode="aspectFit"/></div>
        <ul clas="clearfix">
          <li v-for="(value,index) in type" @click="select(value.id,index)" :class="{'select':value.select}">{{value.name}}</li>
        </ul>
      </div>
      <img src="http://file.rzkeji.com/web/loveciy/img/footer11.png" class="footer" mode="aspectFit"/>
    </div>
  </div>
</template>

<script>
export default {
  props:['animationData','type','tag'],
  data () {
    return {
    }
  },
  computed:{
    shareData(){
      return this.$store.state.modulesCircle.circleData
    },
  },
  methods:{
    filterTime(time){
      var time=time.split(" ")[0].slice(time.split(" ")[0].indexOf("-")+1);
      var timeArr=time.split("-");
      return timeArr[0]+"月"+timeArr[1]+"日"
    },
    select(id,index){
      var _this=this;
      if(_this.tag=='classify')   //分类时执行
      {
        _this.$request.getData("https://diy.zoomyoung.cn/api/goods/get-goods-list",{page:0,classify_id:id}).then(res =>{
          _this.$store.dispatch('setClassifyId',id)
        _this.$store.dispatch('setClassifyData',res.data.data)
        })
      }else{   //造物圈得时候执行
        var userToken=wx.getStorageSync('userToken')
        _this.$request.getData("https://diy.zoomyoung.cn/api/circle/get-circle-list",{page:0,classify_id:id,user_token:userToken,my_like:_this.$store.state.modulesCircle.tagGood}).then(res =>{
          var res=res.data.data;
          _this.$store.dispatch('setCircleData',[])
          if(res.length==0)
          {
            _this.ifLoad=true
          }else{
            _this.ifLoad=false
          }
          for(let [index,value] of res.entries())
          {
            var time=_this.filterTime(res[index].created_at)
            // console.log(res[index])
            _this.shareData.push({
              shareShowImg:res[index].thumb_imgs,
              userInfo:res[index].user_info,
              readNum:res[index].read_num,
              likeNum:res[index].like_num,
              title:res[index].title,
              tag:res[index].tag,
              created_at:time,
              index:index,
              myLike:res[index].is_my_like,
              id:res[index].id,
              type:res[index].type,
              content:res[index].content,
              img_url:res[index].img_url,
              link_url:res[index].link_url
            })
          }
          _this.$store.dispatch('setCircleData',_this.shareData)
          _this.$store.dispatch('setPage',0)
          _this.$store.dispatch('setCircleId',id)
        })
      }

      //点击按钮是变成黑底白字
      for(let [index1,value] of _this.type.entries())
      {
        _this.type[index1].select=false;
      }
       _this.type[index].select=true;
    }
  }
}
</script>

<style scoped>
.scroll_box{width: 100%;position: absolute;background: #fff;top: 53px;z-index: 100}
.navShow{width: 100%;height:0px;overflow:hidden;display: flex;flex-direction: column;opacity: 0;}
.classify{width: 96%;display: flex;justify-content: row;margin-left: 2%;border-bottom:0.1px solid #cccccc;height: 115px;}
.navShow img.colth{width: 110px;height: 70px;margin:0px 10px;}
.navShow .img{width: 140px;height: 75px;border-right: 0.1px solid #cccccc;margin-top: 20px;}
.navShow ul{width: 235px;margin-top:15px;padding-bottom: 30px;margin-left: 10px;overflow:hidden;}
.navShow ul li{width: 60px;height: 30px;text-align: center;line-height: 30px;border:0.1px solid #d9d9d9;float: left;margin-right:10px;margin-top: 5px;border-radius: 10px;font-size: 13px;color: #999999}
.navShow ul li.select{color: #fff;background: #000}
.log{width: 100%;height: 30px;text-align: center;line-height: 30px;padding: 20px 0px;}
.navShow img.footer{width: 187.5px;height: 42px;display: block;margin:0 auto;}
</style>
